Resource

準備作為鍵盤的圖檔，並放到res資料夾中的drawable-v24資料夾

這次除了白色外，還做了七個顏色，讓Image View在按下時改變顏色

Layout

打開manifest檔案，在activity中，將android:screenOrientation這個屬性修改成"sensorLandscape"

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:screenOrientation="sensorLandscape">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN"/>

                    <category android:name="android.intent.category.LAUNCHER"/>
                </intent-filter>
        </activity>
</application>

ImageView
將scaleType屬性設為"fitXY"，讓圖片長寬自動調整，填滿ImageView

<ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="fitXY"
            android:width="5dp"
            android:color="#000000"
            android:id="@+id/key_c" android:layout_marginTop="8dp"
            app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp" android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/btn_d"
            android:background="@drawable/key_white"/>

Method

監聽事件

OnTouchListener
當被觸碰時觸發

key_c.setOnTouchListener(
    object : View.OnTouchListener {
        override fun onTouch(view: View?, event: MotionEvent?): Boolean {
            when (event!!.action and MotionEvent.ACTION_MASK) {
            //設置事件
            }
        return true
        }
    }
)

• MotionEvent
  • ACTION_DOWN:第一根手指按下時觸發
  • ACTION_MOVE:螢幕上觸控點滑動時觸發
  • ACTION_POINTER_DOWN:第一根手指後的手指按下時觸發
  • ACTION_POINTER_UP:在螢幕剩一個觸控點之前，手指離開螢幕時觸發
  • ACTION_UP:手指離開螢幕時觸發

更換ImageView圖片

setImageResource

當ImageView被按下時，把ImageView的圖片換成有顏色的圖片
當收指離開時時，把ImageView的圖片換回白色

key_c.setOnTouchListener(
    object : View.OnTouchListener {
        override fun onTouch(view: View?, event: MotionEvent?): Boolean {
            when (event!!.action and MotionEvent.ACTION_MASK) {
                ACTION_DOWN -> {
                    key_c.setImageResource(R.drawable.key_red)
                }
                ACTION_UP -> {
                    key_c.setImageResource(R.drawable.key_white)
                }
            }
            return true
        }
    }
)

實作成果